<template>
  <div class="friends-list">
    <div class="friends-header">
      <div class="search-container">
        <q-input
          v-model="searchQuery"
          placeholder="搜索"
          class="search-input"
          autocomplete="off"
          borderless
          dense
        >
          <template v-slot:prepend>
            <q-icon name="search" class="search-icon" />
          </template>
        </q-input>
      </div>
      <div class="header-actions">
        <q-btn
          flat
          round
          dense
          icon="person_add"
          @click="showAddFriendDialog = true"
          class="add-btn"
        >
          <q-tooltip>添加好友</q-tooltip>
        </q-btn>
        <q-btn
          flat
          round
          dense
          icon="notifications"
          @click="showRequestsDialog = true"
          class="requests-btn"
        >
          <q-badge v-if="pendingRequestsCount > 0" color="red" floating>
            {{ pendingRequestsCount }}
          </q-badge>
        </q-btn>
      </div>
    </div>

    <div class="friends-content">
      <div v-if="filteredFriends.length === 0 && !searchQuery" class="empty-friends">
        <q-icon name="people_outline" size="48px" color="grey-4" />
        <div class="empty-text">暂无好友</div>
        <div class="empty-hint">点击上方按钮添加好友</div>
      </div>
      
      <!-- 联系人分类 -->
      <div v-else class="contacts-section">
        <!-- 联系人分类标题 -->
        <div class="category-header" :class="{ expanded: contactsExpanded }" @click="contactsExpanded = !contactsExpanded">
          <q-icon :name="contactsExpanded ? 'expand_more' : 'chevron_right'" size="20px" class="category-icon" />
          <span class="category-title">联系人</span>
          <span class="category-count">({{ filteredFriends.length }})</span>
        </div>
        
        <!-- 好友列表（按字母分组） -->
        <div v-show="contactsExpanded" class="friends-grouped">
          <template v-for="(group, letter) in groupedFriends" :key="letter">
            <div v-if="group.length > 0" class="letter-group">
              <div class="letter-separator">{{ letter }}</div>
              <div
                v-for="friend in group"
                :key="friend.to_id"
                class="friend-item"
                :class="{ active: isFriendActive(friend) }"
                @click="handleFriendClick(friend)"
              >
                <div class="friend-avatar-square">
                  <img 
                    v-if="hasAvatar(friend) && !avatarErrors[friend.to_id] && cachedAvatarUrls[friend.to_id]" 
                    :src="cachedAvatarUrls[friend.to_id]"
                    class="avatar-image"
                    @error="handleAvatarError($event, friend)"
                  />
                  <img 
                    v-else
                    :src="getDefaultAvatarUrl(friend)"
                    class="avatar-image"
                  />
                </div>
                <div class="friend-info">
                  <div class="friend-name">{{ friend.remark || friend.user?.name || friend.to_id }}</div>
                  <div class="friend-id" v-if="friend.remark && friend.user?.name">{{ friend.user.name }}</div>
                </div>
                <div class="friend-action-buttons">
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 添加好友对话框 -->
    <q-dialog v-model="showAddFriendDialog">
      <q-card class="dialog-card add-friend-dialog">
        <q-card-section class="dialog-header">
          <div class="dialog-title">添加好友</div>
          <div class="dialog-subtitle">通过用户ID、Open ID或用户名搜索并添加好友</div>
        </q-card-section>
        <q-card-section class="dialog-body">
          <div class="input-group">
            <label class="input-label">用户标识</label>
            <q-input
              v-model="newFriendId"
              placeholder="请输入用户ID、Open ID或用户名"
              outlined
              dense
              autocomplete="off"
              autocapitalize="off"
              autocorrect="off"
              spellcheck="false"
              class="dialog-input add-friend-input"
              :loading="addingFriend"
            >
              <template v-slot:prepend>
                <q-icon name="person_search" class="input-icon" />
              </template>
            </q-input>
          </div>
          <div class="input-group">
            <label class="input-label">验证信息 <span class="optional">（可选）</span></label>
            <q-input
              v-model="friendMessage"
              placeholder="请输入验证信息，让对方知道你是谁"
              outlined
              dense
              type="textarea"
              rows="3"
              class="dialog-input add-friend-textarea"
              autocomplete="off"
              autocapitalize="off"
              autocorrect="off"
              spellcheck="false"
              maxlength="100"
              counter
            />
          </div>
        </q-card-section>
        <q-card-actions align="center" class="dialog-actions add-friend-actions">
          <q-btn 
            flat 
            label="取消" 
            @click="showAddFriendDialog = false" 
            class="dialog-btn dialog-btn-cancel"
          />
          <q-btn
            flat
            label="发送请求"
            @click="handleAddFriend"
            :loading="addingFriend"
            class="dialog-btn add-friend-submit"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <!-- 好友请求列表对话框 - 微信风格 -->
    <q-dialog v-model="showRequestsDialog">
      <q-card class="dialog-card dialog-card-large request-dialog wechat-style">
        <q-card-section class="dialog-header wechat-header">
          <div class="dialog-title">好友请求</div>
          <div class="dialog-subtitle" v-if="pendingRequests.length > 0">
            {{ pendingRequests.length }} 条待处理请求
          </div>
        </q-card-section>
        <q-card-section class="dialog-body dialog-scrollable wechat-body">
          <div v-if="pendingRequests.length === 0" class="empty-request-state">
            <q-icon name="inbox" size="64px" color="grey-4" />
            <div class="empty-request-text">暂无待处理的好友请求</div>
            <div class="empty-request-hint">当有人向你发送好友请求时，会显示在这里</div>
          </div>
          <div
            v-for="request in pendingRequests"
            :key="request.id"
            class="request-item wechat-request-item"
          >
            <div class="request-avatar-container wechat-avatar">
              <img 
                v-if="request.user?.file_name" 
                :src="`${API_BASE_URL}/api/upload/${request.user.file_name}`"
                class="request-avatar-image"
                @error="handleRequestAvatarError($event, request)"
              />
              <img 
                v-else
                :src="getRequestAvatarUrl(request)"
                class="request-avatar-image"
              />
            </div>
            <div class="request-info wechat-info">
              <div class="request-header wechat-header-info">
                <div class="request-name wechat-name">{{ request.user?.name || request.from_id }}</div>
                <div class="request-message wechat-message" v-if="request.message">
                  {{ request.message }}
                </div>
                <div class="request-message wechat-message" v-else>
                  请求添加你为朋友
                </div>
              </div>
            </div>
            <div class="request-actions wechat-actions">
              <q-btn
                flat
                no-caps
                class="request-btn wechat-btn wechat-btn-primary"
                @click="handleRequest(request.id, 1)"
                :loading="processingRequest === request.id"
              >
                同意
              </q-btn>
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="center" class="dialog-actions wechat-footer">
          <q-btn flat no-caps label="关闭" @click="showRequestsDialog = false" class="dialog-btn wechat-close-btn" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <!-- 设置备注对话框 -->
    <q-dialog v-model="showRemarkDialog">
      <q-card style="min-width: 300px">
        <q-card-section>
          <div class="text-h6">设置备注</div>
        </q-card-section>
        <q-card-section>
          <q-input
            v-model="remarkText"
            placeholder="请输入备注名称"
            outlined
            dense
            autocomplete="off"
            autocapitalize="off"
            autocorrect="off"
            spellcheck="false"
            :loading="updatingRemark"
            maxlength="20"
            counter
          />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="取消" @click="showRemarkDialog = false" />
          <q-btn
            flat
            label="确定"
            color="primary"
            @click="handleUpdateRemark"
            :loading="updatingRemark"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <!-- 查看资料对话框 -->
    <q-dialog v-model="showProfileDialog">
      <q-card style="min-width: 400px; max-width: 500px">
        <q-card-section>
          <div class="text-h6">用户资料</div>
        </q-card-section>
        <q-card-section v-if="loadingProfile" class="text-center">
          <q-spinner color="primary" size="3em" />
          <div class="q-mt-md">加载中...</div>
        </q-card-section>
        <q-card-section v-else-if="profileUser">
          <div class="row items-center q-gutter-md q-mb-md">
            <q-avatar size="80px">
              {{ profileUser.name?.[0] || profileUser.id?.[0] || 'U' }}
            </q-avatar>
            <div>
              <div class="text-h6">{{ profileUser.name || profileUser.id }}</div>
              <div class="text-caption text-grey-6">ID: {{ profileUser.id }}</div>
            </div>
          </div>
          <q-separator class="q-mb-md" />
          <div class="q-gutter-sm">
            <div v-if="profileUser.email">
              <div class="text-caption text-grey-6">邮箱</div>
              <div>{{ profileUser.email }}</div>
            </div>
            <div v-if="profileUser.phone">
              <div class="text-caption text-grey-6">手机号</div>
              <div>{{ profileUser.phone }}</div>
            </div>
            <div v-if="profileUser.abstract">
              <div class="text-caption text-grey-6">个性签名</div>
              <div>{{ profileUser.abstract }}</div>
            </div>
            <div v-if="profileUser.gender">
              <div class="text-caption text-grey-6">性别</div>
              <div>{{ profileUser.gender === 1 ? '男' : profileUser.gender === 2 ? '女' : '未知' }}</div>
            </div>
          </div>
        </q-card-section>
        <q-card-section v-else class="text-center text-grey-6">
          无法加载用户资料
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="关闭" @click="showProfileDialog = false" />
        </q-card-actions>
      </q-card>
    </q-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useFriendsList } from './FriendsList'
import { getAvatarStyle, generateSquareDefaultAvatar, getInitial } from '@/utils/avatar'
import { API_BASE_URL } from '@/config/env'
import { getCachedImageUrl } from '@/services/image-cache'
import { useQuasar } from 'quasar'

const props = defineProps<{
  currentTargetId?: string | null
}>()

const emit = defineEmits<{
  'select-friend': [friendId: string]
  'show-friend-details': [friend: any]
  'create-group': [members: Array<{ id: string; name: string }>]
}>()

const $q = useQuasar()

// 联系人分类展开状态
const contactsExpanded = ref(true)

// 头像加载错误记录
const avatarErrors = ref<Record<string, boolean>>({})

// 缓存的头像 URL 映射
const cachedAvatarUrls = ref<Record<string, string>>({})

// 使用业务逻辑
const {
  friends,
  chats,
  searchQuery,
  showAddFriendDialog,
  newFriendId,
  friendMessage,
  addingFriend,
  showRequestsDialog,
  pendingRequests,
  processingRequest,
  showRemarkDialog,
  remarkText,
  currentFriend,
  updatingRemark,
  showProfileDialog,
  profileUser,
  loadingProfile,
  filteredFriends,
  pendingRequestsCount,
  loadFriends,
  loadChats,
  loadPendingRequests,
  formatTime,
  getRequestAvatarUrl,
  handleRequestAvatarError,
  selectFriend,
  handleAddFriend,
  handleRequest,
  handleMenuAction,
  handleUpdateRemark,
  loadUserProfile,
} = useFriendsList(props, emit)

// 获取好友名称的首字母（用于分组）
const getFirstLetter = (friend: any): string => {
  const name = friend.remark || friend.user?.name || friend.to_id || ''
  if (!name) return '#'
  
  // 获取第一个字符
  const trimmedName = name.trim()
  if (!trimmedName) return '#'
  
  const firstChar = trimmedName[0].toUpperCase()
  if (!firstChar) return '#'
  
  // 如果是中文字符，使用拼音首字母（简化处理，使用字符编码判断）
  if (/[\u4e00-\u9fa5]/.test(firstChar)) {
    // 中文字符，使用拼音首字母（这里简化处理，可以根据需要添加拼音库）
    // 暂时使用字符的Unicode范围来分组
    const code = firstChar.charCodeAt(0)
    if (code >= 0x4e00 && code <= 0x9fa5) {
      // 中文字符，可以根据拼音首字母分组，这里简化处理为按Unicode范围分组
      // 实际应用中可以使用 pinyin 库来获取拼音首字母
      return firstChar
    }
  }
  
  // 如果是英文字母
  if (/[A-Z]/.test(firstChar)) {
    return firstChar
  }
  
  // 其他字符（数字、特殊字符等）归为 #
  return '#'
}

// 按字母分组的好友列表
const groupedFriends = computed(() => {
  const groups: Record<string, any[]> = {}
  
  filteredFriends.value.forEach(friend => {
    const letter = getFirstLetter(friend)
    if (!groups[letter]) {
      groups[letter] = []
    }
    groups[letter].push(friend)
  })
  
  // 对每个分组内的好友按名称排序
  Object.keys(groups).forEach(letter => {
    groups[letter].sort((a, b) => {
      const nameA = (a.remark || a.user?.name || a.to_id || '').toLowerCase()
      const nameB = (b.remark || b.user?.name || b.to_id || '').toLowerCase()
      return nameA.localeCompare(nameB, 'zh-CN')
    })
  })
  
  // 按字母顺序排序分组
  const sortedGroups: Record<string, any[]> = {}
  const sortedLetters = Object.keys(groups).sort((a, b) => {
    if (a === '#') return 1
    if (b === '#') return -1
    return a.localeCompare(b)
  })
  
  sortedLetters.forEach(letter => {
    sortedGroups[letter] = groups[letter]
  })
  
  return sortedGroups
})

// 检查是否有头像
const hasAvatar = (friend: any): boolean => {
  return !!(friend.user?.file_name)
}

// 注意：getAvatarContainerStyle 已不再需要，因为现在使用 generateDefaultAvatar 生成SVG头像

// 获取好友首字母（使用工具函数）
const getFriendInitial = (friend: any): string => {
  const name = friend.remark || friend.user?.name || friend.to_id || ''
  return getInitial(name)
}

// 获取默认头像URL（好友列表使用方形头像，50x50px）
const getDefaultAvatarUrl = (friend: any): string => {
  const userId = friend.to_id || friend.user?.open_id || friend.user?.id || ''
  const name = friend.remark || friend.user?.name || friend.to_id || ''
  // 使用工具函数生成方形默认头像（50x50px，圆角4px）
  return generateSquareDefaultAvatar(userId, name, 50, 4)
}

// 处理头像加载错误
const handleAvatarError = (event: Event, friend: any) => {
  // 记录错误，以便在模板中隐藏图片并显示文字
  avatarErrors.value[friend.to_id] = true
}

// 加载好友头像（使用缓存服务）
const loadFriendAvatar = async (friend: any) => {
  if (!hasAvatar(friend)) {
    return
  }
  
  const friendId = friend.to_id
  if (cachedAvatarUrls.value[friendId]) {
    // 已经加载过，跳过
    return
  }
  
  try {
    const url = `${API_BASE_URL}/api/upload/${friend.user.file_name}`
    const cachedUrl = await getCachedImageUrl(url, true) // fallbackToEmpty=true，失败时返回空字符串
    // 如果返回空字符串，说明加载失败，使用默认头像
    if (cachedUrl) {
      cachedAvatarUrls.value[friendId] = cachedUrl
    } else {
      avatarErrors.value[friendId] = true
    }
  } catch (error) {
    console.warn(`加载好友 ${friendId} 的头像失败，使用默认头像:`, error)
    avatarErrors.value[friendId] = true
  }
}

// 监听好友列表变化，加载头像
watch(filteredFriends, async (newFriends) => {
  // 为每个有头像的好友加载缓存头像
  for (const friend of newFriends) {
    if (hasAvatar(friend) && !cachedAvatarUrls.value[friend.to_id] && !avatarErrors.value[friend.to_id]) {
      await loadFriendAvatar(friend)
    }
  }
}, { immediate: true, deep: true })

// 判断好友是否激活（用于高亮显示）
const isFriendActive = (friend: any): boolean => {
  if (!props.currentTargetId) return false
  const friendId = friend.user?.open_id || friend.to_id
  return props.currentTargetId === friendId || props.currentTargetId === friend.to_id
}

// 处理好友点击
const handleFriendClick = (friend: any) => {
  // 在好友列表页面，点击好友时显示用户详情
  emit('show-friend-details', friend)
}
</script>

<style scoped>
.friends-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.friends-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 8px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  flex-shrink: 0;
}

.search-container {
  flex: 1;
  min-width: 0;
  position: relative;
}

.search-input {
  width: 100%;
  
  :deep(.q-field__control) {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FAFAFA;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  
  :deep(.q-field--focused .q-field__control) {
    background: #FFFFFF;
    border-color: rgba(7, 193, 96, 0.3);
    box-shadow: 0 2px 10px rgba(7, 193, 96, 0.15), 0 0 0 3px rgba(7, 193, 96, 0.08);
  }
  
  :deep(.q-field__native) {
    font-size: 14px;
    color: #191919;
    letter-spacing: 0;
    padding: 0;
    font-weight: 400;
  }
  
  :deep(.q-field__prepend) {
    padding: 0;
    margin-right: 8px;
  }
  
  :deep(.q-field__append) {
    padding: 0;
  }
  
  .search-icon {
    color: #8E8E93;
    font-size: 18px;
    transition: color 0.2s ease;
  }
  
  :deep(.q-field--focused .search-icon) {
    color: #07C160;
  }
  
  :deep(.q-field__label) {
    color: #8E8E93;
    font-size: 14px;
    letter-spacing: 0;
    left: 0;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.add-btn {
  color: #07C160;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    background: rgba(7, 193, 96, 0.1);
    color: #06AD56;
  }
  
  &:active {
    background: rgba(7, 193, 96, 0.15);
    transform: scale(0.95);
  }
  
  :deep(.q-icon) {
    font-size: 18px;
  }
}

.requests-btn {
  color: #666666;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  
  &:hover {
    background: #F0F0F0;
    color: #191919;
  }
  
  &:active {
    background: #E5E5E5;
    transform: scale(0.95);
  }
  
  :deep(.q-icon) {
    font-size: 18px;
  }
  
  :deep(.q-badge) {
    top: 2px;
    right: 2px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-weight: 600;
  }
}

.friends-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

/* 联系人分类样式 */
.contacts-section {
  width: 100%;
}

.category-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background: #FFFFFF;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.category-header:hover {
  background: #F5F5F5;
}

.category-icon {
  color: #8E8E93;
  margin-right: 8px;
  transition: transform 0.2s ease;
  font-size: 20px;
}

.category-header.expanded .category-icon {
  transform: rotate(0deg);
}

.category-title {
  font-size: 14px;
  font-weight: 500;
  color: #191919;
  flex: 1;
  letter-spacing: 0;
}

.category-count {
  font-size: 13px;
  color: #8E8E93;
  margin-left: 6px;
  font-weight: 400;
}

/* 好友分组样式 */
.friends-grouped {
  background: #FFFFFF;
}

.letter-group {
  width: 100%;
}

.letter-separator {
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  background: #F7F7F7;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  background: #FFFFFF;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  position: relative;
  min-height: 64px;
}

.friend-item:hover {
  background: #F7F7F7;
}

.friend-item.active {
  background: #D0D0D0;
}

.friend-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #07C160;
}

/* 正方形头像样式 */
.friend-avatar-square {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  margin-right: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  /* 确保背景色能正确显示 */
  background-color: transparent;
}

.friend-avatar-square::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.avatar-text {
  color: white !important;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  user-select: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

.friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.friend-action-buttons {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-name {
  font-weight: 400;
  color: #191919;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.friend-id {
  font-size: 12px;
  color: #8E8E93;
  letter-spacing: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: #666666;
}

.empty-friends {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: #666666;
  text-align: center;
  flex: 1;
  min-height: 0;
}

.empty-text {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}

.empty-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #666666;
}


.friend-menu {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.menu-list {
  padding: 6px 0;
  background: #FFFFFF;
}

.menu-item {
  padding: 10px 16px;
  min-height: 44px;
  transition: background-color 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.menu-item .q-item__section--avatar {
  padding-right: 12px;
  opacity: 0.7;
}

.menu-item:hover .q-item__section--avatar {
  opacity: 1;
}

.menu-item-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15px;
  line-height: 1.5;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu-item-danger .menu-item-label {
  color: #ef4444;
}

.menu-item-success .menu-item-label {
  color: #10b981;
}

.menu-separator {
  margin: 6px 0;
  background-color: rgba(0, 0, 0, 0.08);
}

/* 对话框样式优化 - 现代化设计 */
.dialog-card {
  min-width: 300px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  background: #FFFFFF;
}

.dialog-card-large {
  min-width: 480px;
  max-width: 560px;
}

.dialog-header {
  padding: 28px 28px 20px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
}

.dialog-title {
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.4px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 4px;
}

.dialog-body {
  padding: 24px 28px;
  background: #FFFFFF;
}

.dialog-scrollable {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}

.dialog-scrollable::-webkit-scrollbar {
  width: 6px;
}

.dialog-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.dialog-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.dialog-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dialog-input {
  font-size: 15px;
}

.dialog-input :deep(.q-field__label) {
  font-size: 14px;
  font-weight: 500;
  color: #3A3A3C;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dialog-input :deep(.q-field__native) {
  font-size: 15px;
  color: #1D1D1F;
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dialog-input :deep(.q-field__input) {
  font-size: 15px;
  color: #1D1D1F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dialog-actions {
  padding: 16px 28px 24px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #FAFBFC;
}

.dialog-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  min-width: 80px;
  letter-spacing: -0.1px;
  border-radius: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
}

.dialog-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dialog-btn-cancel {
  color: #666666;
}

.dialog-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #191919;
}

.add-friend-actions {
  gap: 12px;
}

.add-friend-submit {
  color: #191919;
}

.add-friend-submit:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #191919;
}

/* 添加好友对话框特殊样式 */
.add-friend-dialog {
  min-width: 420px;
  max-width: 480px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #191919;
  margin-bottom: 8px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.input-label .optional {
  color: #8E8E93;
  font-weight: 400;
}

.add-friend-input {
  width: 100%;
}

.add-friend-input :deep(.q-field__control) {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #FAFAFA;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  height: 40px;
  min-height: 40px;
}

.add-friend-input :deep(.q-field--focused .q-field__control) {
  background: #FFFFFF;
  border-color: rgba(7, 193, 96, 0.4);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.add-friend-input :deep(.q-field__prepend) {
  padding-right: 8px;
}

.input-icon {
  color: #8E8E93;
  font-size: 20px;
  transition: color 0.2s ease;
}

.add-friend-input :deep(.q-field--focused .input-icon) {
  color: #07C160;
}

.add-friend-textarea {
  width: 100%;
}

.add-friend-textarea :deep(.q-field__control) {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #FAFAFA;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 80px;
}

.add-friend-textarea :deep(.q-field--focused .q-field__control) {
  background: #FFFFFF;
  border-color: rgba(7, 193, 96, 0.4);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.add-friend-textarea :deep(.q-field__native) {
  padding: 10px 0;
  line-height: 1.5;
}

.add-friend-textarea :deep(.q-field__counter) {
  color: #8E8E93;
  font-size: 12px;
  padding-top: 4px;
}

.add-friend-submit {
  min-width: 100px;
  padding: 10px 24px;
}

/* 好友请求对话框样式优化 */
.request-dialog {
  max-width: 500px;
}

.dialog-subtitle {
  font-size: 14px;
  color: #8E8E93;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.empty-request-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.empty-request-text {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  letter-spacing: -0.2px;
}

.empty-request-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #666666;
  letter-spacing: -0.1px;
  line-height: 1.5;
}

/* 微信风格的好友请求对话框 */
.wechat-style {
  background: #EDEDED;
}

.wechat-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  padding: 20px 16px 16px 16px;
}

.wechat-body {
  background: #EDEDED;
  padding: 0;
}

.wechat-footer {
  background: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  padding: 12px 16px;
}

/* 微信风格的好友请求项 */
.wechat-request-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.2s ease;
  position: relative;
}

.wechat-request-item::before {
  display: none;
}

.wechat-request-item:hover {
  background: #F7F7F7;
  transform: none;
  box-shadow: none;
  border-color: #E5E5E5;
}

.wechat-request-item:last-child {
  border-bottom: none;
}

.wechat-avatar {
  flex-shrink: 0;
  margin-right: 12px;
}

.wechat-avatar .request-avatar-image {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  border: none;
  box-shadow: none;
  transition: none;
}

.wechat-request-item:hover .request-avatar-image {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.wechat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wechat-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wechat-name {
  font-size: 17px;
  font-weight: 500;
  color: #191919;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wechat-message {
  font-size: 14px;
  color: #576B95;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: break-word;
}

.wechat-source {
  font-size: 12px;
  color: #999999;
  line-height: 1.4;
  margin-top: 4px;
}

.wechat-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
  padding-left: 12px;
}

.wechat-btn {
  min-width: 68px;
  height: 32px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 4px;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.2s ease;
  border: none;
}

.wechat-btn::before {
  display: none;
}

.wechat-btn:hover {
  transform: none;
  box-shadow: none;
}

.wechat-btn:active {
  transform: none;
  box-shadow: none;
  transition: background-color 0.1s ease;
}

.wechat-btn-primary {
  background: #07C160;
  color: #FFFFFF;
}

.wechat-btn-primary:hover {
  background: #06AD56;
}

.wechat-btn-primary:active {
  background: #059945;
}

.wechat-close-btn {
  color: #576B95;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 16px;
  min-width: auto;
}

.wechat-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
</style>

